<template>
  <div class="national-container">
    <el-row :gutter="20">
      <el-col class="img-item" :span="6" v-for="(img, index) in gallerys" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="img.img" class="image">
          <div style="padding: 14px;">
            <span>{{img.topicName}}</span>
            <div class="bottom clearfix">
              <time class="time">{{img.inDate}}</time>
              <el-button class="button" size="mini" type="primary" plain>查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
/* eslint-disable */
import axios from "axios";
export default {
  name: "Hotelsf",
  data() {
    return {
      gallerys: []
    };
  },
  methods: {
    getHotInfo() {
      axios
        .get("/api/national.json")
        .then(this.handlerInfo)
        .catch(error => console.log(error));
    },
    handlerInfo(res) {
      res = res.data;
      if (res.hotTopic) {
        this.gallerys = res.hotTopic.regionList.concat(res.hotTopic.regionList);
      }
    }
  },
  mounted() {
    this.getHotInfo();
  }
};
</script>
<style lang="scss" scoped>
.national-container {
  margin: 0 auto;
  width: 70em;
  .img-item {
    padding: 1em 0;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
}
</style>
